<template>
	<view>
		<page-head headTitle="定制订单" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<view class="m-t12">
			<view class="m bg-white">
				<view class="flex height align-center border-botton">
					<view class="flex-1 flex justify-content fs-g">
						<text class="order-text" @click="cur=0" :class="{active:cur==0}">全部</text>
					</view>
					<view class="flex-1 flex justify-content fs-g">
						<text class="order-text" @click="cur=1" :class="{active:cur==1}">待出行</text>
					</view>
					<view class="flex-1 flex justify-content fs-g">
						<text class="order-text" @click="cur=2" :class="{active:cur==2}">已评价</text>
					</view>
				</view>
				<view v-show="cur==0">
					<view class="p-l-r3">
						<view class="p-t-b4 border-botton">
							<view class="flex justify-between align-center">
								<image src="/static/images/picture.png" class="book-image border-r1 mr" mode="widthFix"></image>
								<view class="flex-1">
									<view class="flex align-start justify-between">
										<view class="flex align-center">
											<text class="fs-3">赵小糖</text><text class="iconfont icon-message book-icon"></text>
										</view>
										<text class="color-blue">待出行</text>
									</view>
								</view>
							</view>
							<view class="flex fs-3 m-t-3 p-l2 color-c justify-between">
								<view class="flex">
									<view>
										<text>南宁</text>
										<image src="/static/images/switch-arrow.png" class="switch-arrow m-l-r3" mode="widthFix">
										<text>柳州</text>
									</view>
									<view class="mr-6">
										<text>3.15</text>
										<text class="p-l2 p-r2 color-c">至</text>
										<text>3.18</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="p-l-r3">
						<view class="p-t-b4">
							<view class="flex justify-between align-center">
								<image src="/static/images/picture.png" class="book-image border-r1 mr" mode="widthFix"></image>
								<view class="flex-1">
									<view class="flex align-start justify-between">
										<view class="flex align-center">
											<text class="fs-3">赵小糖</text><text class="iconfont icon-message book-icon"></text>
										</view>
										<text class="color-blue">待出行</text>
									</view>
								</view>
							</view>
							<view class="flex fs-3 m-t-3 p-l2 color-c justify-between">
								<view class="flex">
									<view>
										<text>南宁</text>
										<image src="/static/images/switch-arrow.png" class="switch-arrow m-l-r3" mode="widthFix">
										<text>柳州</text>
									</view>
									<view class="mr-6">
										<text>3.15</text>
										<text class="p-l2 p-r2 color-c">至</text>
										<text>3.18</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="m-t3 book-felt">
						<button class="cancel-button fs-32 evaluate border-0 m-r4 refuse">拒绝取消</button>
						<button class="cancel-button fs-32 evaluate border-0">同意取消</button>
					</view>
				</view>
				<view v-show="cur==1">
					<view class="p-l-r3">
						<view class="p-t-b4 border-botton">
							<view class="flex justify-between align-center">
								<image src="/static/images/picture.png" class="book-image border-r1 mr" mode="widthFix"></image>
								<view class="flex-1">
									<view class="flex align-start justify-between">
										<view class="flex align-center">
											<text class="fs-3">赵小糖</text><text class="iconfont icon-message book-icon"></text>
										</view>
										<text class="color-blue">待出行</text>
									</view>
								</view>
							</view>
							<view class="flex fs-3 m-t-3 p-l2 color-c justify-between">
								<view class="flex">
									<view>
										<text>南宁</text>
										<image src="/static/images/switch-arrow.png" class="switch-arrow m-l-r3" mode="widthFix">
										<text>柳州</text>
									</view>
									<view class="mr-6">
										<text>3.15</text>
										<text class="p-l2 p-r2 color-c">至</text>
										<text>3.18</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="p-l-r3">
						<view class="p-t-b4">
							<view class="flex justify-between align-center">
								<image src="/static/images/picture.png" class="book-image border-r1 mr" mode="widthFix"></image>
								<view class="flex-1">
									<view class="flex align-start justify-between">
										<view class="flex align-center">
											<text class="fs-3">赵小糖</text><text class="iconfont icon-message book-icon"></text>
										</view>
										<text class="color-blue">待出行</text>
									</view>
								</view>
							</view>
							<view class="flex fs-3 m-t-3 p-l2 color-c justify-between">
								<view class="flex">
									<view>
										<text>南宁</text>
										<image src="/static/images/switch-arrow.png" class="switch-arrow m-l-r3" mode="widthFix">
										<text>柳州</text>
									</view>
									<view class="mr-6">
										<text>3.15</text>
										<text class="p-l2 p-r2 color-c">至</text>
										<text>3.18</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="m-t3 book-felt">
						<button class="cancel-button fs-32 evaluate border-0 m-r4 refuse">拒绝取消</button>
						<button class="cancel-button fs-32 evaluate border-0">同意取消</button>
					</view>
				</view>
				<view v-show="cur==2">
					<view class="p-l-r3">
						<view class="p-t-b4 border-botton">
							<view class="flex justify-between align-center">
								<image src="/static/images/picture.png" class="book-image border-r1 mr" mode="widthFix"></image>
								<view class="flex-1">
									<view class="flex align-start justify-between">
										<view class="flex align-center">
											<text class="fs-3">赵小糖</text><text class="iconfont icon-message book-icon"></text>
										</view>
										<text class="color-blue">待出行</text>
									</view>
								</view>
							</view>
							<view class="flex fs-3 m-t-3 p-l2 color-c justify-between">
								<view class="flex">
									<view>
										<text>南宁</text>
										<image src="/static/images/switch-arrow.png" class="switch-arrow m-l-r3" mode="widthFix">
										<text>柳州</text>
									</view>
									<view class="mr-6">
										<text>3.15</text>
										<text class="p-l2 p-r2 color-c">至</text>
										<text>3.18</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="p-l-r3">
						<view class="p-t-b4">
							<view class="flex justify-between align-center">
								<image src="/static/images/picture.png" class="book-image border-r1 mr" mode="widthFix"></image>
								<view class="flex-1">
									<view class="flex align-start justify-between">
										<view class="flex align-center">
											<text class="fs-3">赵小糖</text><text class="iconfont icon-message book-icon"></text>
										</view>
										<text class="color-blue">待出行</text>
									</view>
								</view>
							</view>
							<view class="flex fs-3 m-t-3 p-l2 color-c justify-between">
								<view class="flex">
									<view>
										<text>南宁</text>
										<image src="/static/images/switch-arrow.png" class="switch-arrow m-l-r3" mode="widthFix">
										<text>柳州</text>
									</view>
									<view class="mr-6">
										<text>3.15</text>
										<text class="p-l2 p-r2 color-c">至</text>
										<text>3.18</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="m-t3 book-felt">
						<button class="cancel-button fs-32 evaluate border-0 m-r4 refuse">拒绝取消</button>
						<button class="cancel-button fs-32 evaluate border-0">同意取消</button>
					</view>
				</view>
			    </view>	
	    </view>
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
	export default {
		components:{
			pageHead
		},
		data() {
			return {
				cur:0,
				isShow:false
			}
		},
		methods: {
			clickLeftReturn(){
				uni.navigateBack({
				    delta: 1
				});
			},
			cancel(){
				this.isShow = true;
			},
			onCancel(){
				this.isShow = false;
			}
		}
	}
</script>

<style scoped>
.search-icon{font-size: 60rpx;color: #AAAAAA;}
.book-image{width: 80rpx; height: 80rpx;}
.book-icon{font-size: 50rpx !important;line-height: 1.2;}
.book-fs{font-size: 20rpx;}
.cancel-content{top: 30%;left: 60rpx;right: 60rpx;border-radius: 20rpx; background-color: #FFFFFF;z-index: 2;}
.book-widht{width: 49.5%;}
.cancel-p{padding: 90rpx 40rpx;box-sizing: border-box;}
.cancel-res{border-left: 2rpx solid #DDDDDD;color: #FF4949;}
.refuse{float: left;color: #FFFFFF !important;background-color: #FF4141 !important;}
</style>
